import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function Base() {
    return (
        <Router>
            <ul>
                <li>
                <Link to="/">Home</Link>
                </li>
                <li>
                <Link to="/about">About</Link>
                </li>
                <li>
                <Link to="/topics">Topics</Link>
                </li>
            </ul>
            
            <div>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/topics" render={({match}) => {
                return (
                    <Topics match={match}>
                        <Route path={`${match.path}/:id`} component={Topic} />
                        <Route
                        exact
                        path={match.path}
                        render={() => <h3>Please select a topic.</h3>}
                        />
                    </Topics>
                )
            }} />
            </div>
        </Router>
    );
}
  
  function Home(props) {
      console.log(props);
    return <h2>Home</h2>;
  }
  
  function About() {
    return <h2>About</h2>;
  }
  
  function Topic({ match }) {
    return <h3>Requested Param: {match.params.id}</h3>;
  }
  
  function Topics({ match, children }) {
      console.log(match);
        return (
        <div>
            <h2>Topics</h2>
    
            <ul>
            <li>
                <Link to={`${match.url}/components`}>Components</Link>
            </li>
            <li>
                <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
            </li>
            </ul>
    
            {/* <Route path={`${match.path}/:id`} component={Topic} />
            <Route
            exact
            path={match.path}
            render={() => <h3>Please select a topic.</h3>}
            /> */}
            {children}
        </div>
        );
  }
  
  export default Base;